<script lang="ts" setup>
import {onMounted, toRefs} from "vue";

  interface DialogProps {
    show: boolean
    message: string
    duration?: number
  }

  const props = withDefaults(defineProps<DialogProps>(), {
    show: false,
    message: '',
    duration: 3000
  })

  const emit = defineEmits<{
    (e: 'update:show', show: boolean): void
  }>()

  const { duration, show, message } = toRefs(props)

  onMounted(() => {
    setTimeout(() => {
      emit('update:show', false)
    }, duration.value)
  })
</script>

<template>
  <div v-if="show" class="dialog">
    <div class="dialog-container flex items-center justify-center">
      <slot>
        <p class="dialog-content">{{ message }}</p>
      </slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .dialog {
    position: fixed;
    left: 50%;
    top: 20px;
    z-index: 9999;
    @apply w-max xs:w-full xs:left-0 xs:right-0;

    .dialog-container {
      background: #16b1ff;
      box-shadow: 0px 0px 14px 0px rgba(196, 226, 234, 1);
      border-radius: 11px;
      padding: 20px;
      .dialog-content {
        font-size: 15px;
        color: white;
        line-height: 18px;
      }
    }
  }
</style>
